<template>
    <div class="shop-detail">
        <!-- 1. 公用的导航头部 -->
        <common-nav-header>
            <template #left>
                <a class="back fl" href="javascript:;"></a>
            </template>
            <template #title>
                <h1 class="title fl">商品详情</h1>
            </template>
            <template #right>
                <a class="shop-detail-something fr" href="javascript:;"></a>
            </template>
        </common-nav-header>
        <!-- 2. Vant Swipe轮播图组件 -->
        <banner :banner-list="shopDetailsPic"></banner>
        <!-- 3. 商品详情基本信息 -->
        <div class="shop-detail-info">
            <ul>
                <li>
                    <div class="commonC titleAndPrice">
                        <h1>金瑞玛固态电池 - 电池型号JRM-GC-1</h1>
                        <span class="sh-price">￥569.00</span>
                    </div>
                </li>
                <li>
                    <div class="commonC clearFix">
                        <label class="fl">已选</label>
                        <span class="fl">电池型号JRM-GC-1个</span>
                        <em class="fr"></em>
                    </div>
                </li>
                <li>
                    <div class="commonC sendAddr clearFix">
                        <label class="fl">配送至</label>
                        <span class="fl">亲你还没有填写配送地址哟</span>
                        <em class="fr"></em>
                    </div>
                </li>
                <li>
                    <div class="commonC clearFix">
                        <label class="fl">重量</label>
                        <span class="fl">0.93kg</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 4. 商品详情展示图 -->
        <div class="shop-detail-show-pic">
            <h2>商品详情</h2>
            <div class="shop-details-pic">
                <img :src="item.url" v-for="item in shopDetailsShowPic" :key="item.id" alt="item.title" title="item.title" />
            </div>
        </div>
        <!-- 5. 商品详情按钮组 -->
        <div class="shop-detail-btn-group clearFix">
            <div class="left-btn fl">
                <nav class="clearFix">
                    <a class="fl" href="javascript:;">联系卖家</a>
                    <span class="fl"></span>
                    <a class="fl" href="javascript:;">产品中心</a>
                </nav>
            </div>
            <div class="right-btn fr clearFix">
                <button class="fl">加入购物车</button>
                <button class="fl">立即购买</button>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入公用的头部组件
    import CommonNavHeader from '@/components/commonHeader/CommonNavHeader';

    // 引入公用的轮播图组件
    import Banner from '@/components/rotationChart/Banner';

    export default {
        name: 'shopDetail',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 商品详情展示图
                shopDetailsShowPic: [{
                        id: 1,
                        title: '商品详情展示图111',
                        url: '/images/productPicture_01.png'
                    },
                    {
                        id: 2,
                        title: '商品详情展示图222',
                        url: '/images/productPicture_02.png'
                    },
                    {
                        id: 3,
                        title: '商品详情展示图333',
                        url: '/images/productPicture_03.png'
                    },
                    {
                        id: 4,
                        title: '商品详情展示图444',
                        url: '/images/productPicture_04.png'
                    },
                    {
                        id: 5,
                        title: '商品详情展示图555',
                        url: '/images/productPicture_05.png'
                    },
                    {
                        id: 6,
                        title: '商品详情展示图666',
                        url: '/images/productPicture_06.png'
                    },
                    {
                        id: 7,
                        title: '商品详情展示图777',
                        url: '/images/productPicture_07.png'
                    },
                    {
                        id: 8,
                        title: '商品详情展示图888',
                        url: '/images/productPicture_08.png'
                    },
                    {
                        id: 9,
                        title: '商品详情展示图999',
                        url: '/images/productPicture_09.png'
                    }
                ],
                // 商品详情页轮播图
                shopDetailsPic: [{
                        id: 1,
                        title: '商品详情轮播图1',
                        url: '/images/productDetails_banner.png'
                    },
                    {
                        id: 2,
                        title: '商品详情轮播图2',
                        url: '/images/productDetails_banner.png'
                    },
                    {
                        id: 3,
                        title: '商品详情轮播图3',
                        url: '/images/productDetails_banner.png'
                    },
                    {
                        id: 4,
                        title: '商品详情轮播图4',
                        url: '/images/productDetails_banner.png'
                    },
                    {
                        id: 5,
                        title: '商品详情轮播图5',
                        url: '/images/productDetails_banner.png'
                    }
                ]
            };
        },
        methods: {

        },
        computed: {

        },
        components: {
            CommonNavHeader,
            Banner
        }
    };

</script>

<style lang="scss">
    .myBannerPic {
        .swiper-slide {
            a {
                img {
                    height: 501px !important;
                }
            }
        }
    }

</style>

<style lang="scss" scoped>
    .shop-detail {
        width: 100%;
        background-color: #e0e0e0;

        .common-nav-header {
            width: 100%;
            background-color: #30e5e0;

            .back {
                width: 23px;
                height: 88px;
                background: url(/images/wf_ico.png) no-repeat -652px -307px;
                background-size: 834px 535px;
            }

            .title {
                width: 643px;
                font-weight: bold;
                font-size: 32px;
                line-height: 88px;
                color: #fff;
                text-align: center;
            }
        }

        .shop-detail-info {
            width: 100%;

            ul {
                li {
                    margin-bottom: 20px;
                    background-color: #fff;

                    .commonC {
                        padding: 40px 35px;
                        box-sizing: border-box;
                        -webkit-box-sizing: border-box;

                        h1 {
                            font-weight: normal;
                            font-size: 28px;
                            line-height: 50px;
                            color: #333;
                        }

                        .sh-price {
                            display: block;
                            font-weight: normal;
                            font-size: 28px;
                            color: #f01b2d;
                        }

                        label {
                            font-weight: normal;
                            font-size: 24px;
                            color: #626262;
                            margin-right: 15px;
                        }

                        span {
                            font-weight: normal;
                            font-size: 24px;
                            color: #333;
                        }
                    }

                    &:nth-of-type(3) {
                        margin-bottom: 0;

                        .commonC {
                            margin: 0 30px;
                            padding-left: 0;
                            padding-right: 0;
                            border-bottom: 1px solid #e0e0e0;
                        }
                    }
                }
            }
        }

        .shop-detail-show-pic {
            width: 100%;

            h2 {
                font-weight: normal;
                font-size: 28px;
                line-height: 62px;
                color: #003333;
                background-color: #fff;
                padding: 0 30px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            .shop-details-pic {
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }

        .shop-detail-btn-group {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 999;
            width: 100%;
            height: 104px;
            background-color: #f4f4f4;
            .left-btn {
                padding: 20px 0;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                nav {
                    padding: 0 34px;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    a {
                        font-weight: normal;
                        font-size: 24px;
                        line-height: 60px;
                        color: #626262;
                    }

                    span {
                        display: block;
                        width: 1px;
                        height: 60px;
                        background-color: #e0e0e0;
                        margin: 0 34px;
                    }
                }
            }

            .right-btn {
                width: auto;
                height: 104px;
                button {
                    padding: 0 42px;
                    height: 100%;
                    box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    background-color: #3fefdb;
                    font-weight: normal;
                    font-size: 28px;
                    line-height: 104px;
                    color: #fff;
                    text-align: center;
                    &:last-of-type {
                        background-color: #ff5050;
                    }
                }
            }
        }
    }

</style>
